
<template>
  <div style="background: #fff; height: 100%">
    <div class="enterpriseInfoTab">
      <ul>
        <li class="defaultActive">
          <a
            @click="
              enterpriseInfoRouter(
                '/dlyrl/hr/enterpriseinformation/EnterpriseInformationList'
              )
            "
          >
            企业信息
          </a>
        </li>
        <li>
          <a
            @click="
              enterpriseInfoRouter('/dlyrl/hr/averageCompany/averageCompany')
            "
          >
            一般企业
          </a>
        </li>
        <li>
          <a @click="enterpriseInfoRouter('/dlyrl/hr/serviceFirm/serviceFirm')">
            服务企业
          </a>
        </li>
        <li>
          <a
            @click="
              enterpriseInfoRouter(
                '/dlyrl/hr/popularenterprise/HrPopularEnterpriseList'
              )
            "
          >
            热门企业
          </a>
        </li>
      </ul>
    </div>
    <div>
      <el-form
        size="small"
        :inline="true"
        class="query-form"
        ref="searchForm"
        :model="searchForm"
        @keyup.enter.native="refreshList()"
        @submit.native.prevent
        style="padding-left: 15px"
      >
        <!-- 搜索框-->
        <el-form-item prop="companyName">
          <el-input
            size="small"
            v-model="searchForm.companyName"
            placeholder="企业名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="area">
          <CityPicker
            style="width: 100%"
            size="small"
            placeholder="选择所在地（省、市）"
            :value="searchForm.area"
            :clearable="true"
            :accordion="true"
            @getValue="
              (value) => {
                searchForm.area = value;
              }
            "
          />
        </el-form-item>
        <el-form-item prop="gradeRatings">
          <el-select
            v-model="searchForm.gradeRatings"
            placeholder="请选择等级评级"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in $dictUtils.getDictList('grade_ratings')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="whetherPay">
          <el-select
            v-model="searchForm.whetherPay"
            placeholder="请选择是否付费"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in $dictUtils.getDictList('yes_no')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="whetherPay">
          <el-input
            v-model="searchForm.socialCredit"
            placeholder="社会信用统一代码"
            size="small"
            clearable
          >
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="startTime">
                    <el-date-picker
                            v-model="searchForm.startTime"
                            type="daterange"
                            size="small"
                            align="right"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            unlink-panels
                            ge-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>
                <el-form-item prop="endTime">
                    <el-date-picker
                            v-model="searchForm.endTime"
                            type="daterange"
                            size="small"
                            align="right"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            unlink-panels
                            ge-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item> -->
        <el-form-item style="float: right">
          <el-button type="primary" @click="refreshList()" size="small"
            >查询</el-button
          >
          <el-button @click="resetSearch()" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 导入导出-->
      <el-dialog title="导入Excel" :visible.sync="isImportCollapse">
        <el-form
          size="small"
          :inline="true"
          v-show="isImportCollapse"
          ref="importForm"
        >
          <el-form-item>
            <el-button type="default" @click="downloadTpl()" size="small"
              >下载模板</el-button
            >
          </el-form-item>
          <el-form-item prop="loginName">
            <el-upload
              class="upload-demo"
              :action="`${this.$http.BASE_URL}/dlyrl/hr/enterpriseinformation/enterpriseInformation/import`"
              :on-success="uploadSuccess"
              :show-file-list="true"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只允许导入“xls”或“xlsx”格式文件！
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>
      <div style="padding: 0 15px">
        <el-row>
          <el-button
            v-if="
              hasPermission(
                'dlyrl:hr:enterpriseinformation:enterpriseInformation:add'
              )
            "
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="add()"
            >新建</el-button
          >
          <el-button
            v-if="
              hasPermission(
                'dlyrl:hr:enterpriseinformation:enterpriseInformation:edit'
              )
            "
            type="warning"
            size="small"
            icon="el-icon-edit-outline"
            @click="edit()"
            :disabled="dataListSelections.length != 1"
            plain
            >修改</el-button
          >
          <el-button
            v-if="
              hasPermission(
                'dlyrl:hr:enterpriseinformation:enterpriseInformation:del'
              )
            "
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="del()"
            :disabled="dataListSelections.length <= 0"
            plain
            >删除
          </el-button>
          <el-button-group class="pull-right">
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:enterpriseinformation:enterpriseInformation:import'
                )
              "
              type="default"
              size="small"
              icon="el-icon-upload2"
              title="导入"
              @click="isImportCollapse = !isImportCollapse"
            ></el-button>
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:enterpriseinformation:enterpriseInformation:export'
                )
              "
              type="default"
              size="small"
              icon="el-icon-download"
              title="导出"
              @click="exportExcel()"
            ></el-button>
            <el-button
              type="default"
              size="small"
              icon="el-icon-refresh"
              @click="refreshList"
            >
            </el-button>
          </el-button-group>
        </el-row>
        <el-table
          :cell-style="cellStyle"
          style="border: 1px solid #d6cfe2"
          :header-cell-class-name="cellHeadStyle"
          :row-class-name="tableRowClassName"
          :data="dataList"
          size="small"
          @selection-change="selectionChangeHandle"
          @sort-change="sortChangeHandle"
          v-loading="loading"
          class="table"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="serviceType"
            show-overflow-tooltip 
            width="130px"
            label="企业类型"
            fixed="left"
          >
            <template slot-scope="scope">
              {{
                $dictUtils.getDictLabel(
                  "type_service",
                  scope.row.serviceType,
                  "-"
                )
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="companyName"
            show-overflow-tooltip 
            width="130px"
            label="企业名称"
            fixed="left"
          >
            <!-- <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                v-if="
                  hasPermission(
                    'dlyrl:hr:enterpriseinformation:enterpriseInformation:edit'
                  )
                "
                @click="edit(scope.row.id)"
                >{{ scope.row.companyName }}</el-link
              >
              <el-link
                type="primary"
                :underline="false"
                v-else-if="
                  hasPermission(
                    'dlyrl:hr:enterpriseinformation:enterpriseInformation:view'
                  )
                "
                @click="view(scope.row.id)"
                >{{ scope.row.companyName }}</el-link
              >
              <span v-else>{{ scope.row.companyName }}</span>
            </template> -->
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="view(scope.row.id)"
                >{{ scope.row.companyName }}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="area"
            show-overflow-tooltip 
            width="140px"
            label="所在地"
          >
          </el-table-column>
          <el-table-column
            prop="detailedArea"
            show-overflow-tooltip 
            width="130px"
            label="详细地址"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="businessLicenseEnterprise"
            show-overflow-tooltip 
            width="130px"
            label="企业营业执照"
          >
            <template
              slot-scope="scope"
              v-if="scope.row.businessLicenseEnterprise"
            >
              <a
                :href="item"
                target="_blank"
                :key="index"
                v-for="(
                  item, index
                ) in scope.row.businessLicenseEnterprise.split('|')"
              >
                {{
                  decodeURIComponent(item.substring(item.lastIndexOf("/") + 1))
                }}
              </a>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="gradeRatings"
            show-overflow-tooltip 
            width="130px"
            label="等级评级"
          >
            <template slot-scope="scope">
              {{
                $dictUtils.getDictLabel(
                  "grade_ratings",
                  scope.row.gradeRatings,
                  "-"
                )
              }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="companyProfile"
            show-overflow-tooltip 
            width="130px"
            label="企业介绍"
          >
          </el-table-column> -->
          <el-table-column
            prop="whetherPay"
            show-overflow-tooltip 
            width="130px"
            label="是否付费"
          >
            <template slot-scope="scope">
              {{ $dictUtils.getDictLabel("yes_no", scope.row.whetherPay, "-") }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isRecommend"
            show-overflow-tooltip 
            width="150px"
            label="是否推荐企业"
          >
            <!-- ，0是，1否 -->
            <template slot-scope="scope">
              {{
                $dictUtils.getDictLabel(
                  "type_recommend",
                  scope.row.isRecommend,
                  "-"
                )
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="packagePrice"
            show-overflow-tooltip 
            width="130px"
            label="套餐价格"
          >
          </el-table-column>
          <el-table-column
            prop="startTime"
            show-overflow-tooltip 
            width="130px"
            label="套餐开始时间"
          >
          </el-table-column>
          <el-table-column
            prop="endTime"
            show-overflow-tooltip 
            width="130px"
            label="套餐结束时间"
          >
          </el-table-column>
          <!-- <el-table-column
                  prop="contractTemplate"
                  show-overflow-tooltip
                  width="130px"
                  label="合同模板">
                  <template slot-scope="scope">
                      <p v-html="$utils.unescapeHTML(scope.row.contractTemplate)"></p>
                  </template>
              </el-table-column> -->
          <!-- <el-table-column
            prop="registrationType"
            show-overflow-tooltip 
            width="130px"
            label="注册类型"
          >
            <template slot-scope="scope">
              {{
                $dictUtils.getDictLabel(
                  "type_registration",
                  scope.row.registrationType,
                  "-"
                )
              }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="customerManager.name"
            show-overflow-tooltip 
            width="130px"
            label="客户经理"
          >
          </el-table-column> -->
          <!-- <el-table-column
            prop="checkManager.name"
            show-overflow-tooltip 
            width="130px"
            label="审核人"
          >
          </el-table-column> -->
          <!-- <el-table-column
            prop="accountManager.name"
            show-overflow-tooltip 
            width="130px"
            label="代理记账员"
          >
          </el-table-column> -->
          <!-- <el-table-column
            prop="logo"
            show-overflow-tooltip 
            width="130px"
            label="企业logo"
          >
            <template slot-scope="scope" v-if="scope.row.logo">
              <a
                :href="item"
                target="_blank"
                :key="index"
                v-for="(item, index) in scope.row.logo.split('|')"
              >
                {{
                  decodeURIComponent(item.substring(item.lastIndexOf("/") + 1))
                }}
              </a>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="servicesysUser.name"
            show-overflow-tooltip 
            width="130px"
            label="客服人员"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="qrCode"
            show-overflow-tooltip 
            width="130px"
            label="入职二维码"
          >
          </el-table-column> -->
          <!-- <el-table-column
                  prop="dispatchqrcode"
                  show-overflow-tooltip
                  width="160px"
                  label="劳务派遣入职二维码">
              </el-table-column> -->
          <el-table-column
            prop="balance"
            show-overflow-tooltip 
            width="130px"
            label="企业余额"
          >
          </el-table-column>
          <!-- <el-table-column
                  prop="companyEnvironment"
                  show-overflow-tooltip
                  width="130px"
                  label="企业环境">
                  <template slot-scope="scope" v-if="scope.row.companyEnvironment">
                      <a :href="item" target="_blank" :key="index" v-for="(item, index) in scope.row.companyEnvironment.split('|')">
                          {{decodeURIComponent(item.substring(item.lastIndexOf("/")+1))}}
                      </a>
                  </template>
              </el-table-column> -->
          <!-- <el-table-column
            prop="socialCredit"
            show-overflow-tooltip 
            width="160px"
            label="社会信用统一代码"
          >
          </el-table-column> -->
          <el-table-column
            prop="remarks"
            show-overflow-tooltip 
            width="130px"
            label="备注信息"
          >
          </el-table-column>
          <!-- <el-table-column
            header-align="center"
            align="center"
            fixed="right"
            :key="Math.random()"
            width="200"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                v-if="
                  hasPermission(
                    'dlyrl:hr:enterpriseinformation:enterpriseInformation:view'
                  )
                "
                type="text"
                icon="el-icon-view"
                size="mini"
                @click="view(scope.row.id)"
                >查看</el-button
              >
              <el-button
                v-if="
                  hasPermission(
                    'dlyrl:hr:enterpriseinformation:enterpriseInformation:edit'
                  )
                "
                type="text"
                icon="el-icon-edit"
                size="mini"
                @click="edit(scope.row.id)"
                >修改</el-button
              >
              <el-button
                v-if="
                  hasPermission(
                    'dlyrl:hr:enterpriseinformation:enterpriseInformation:del'
                  )
                "
                type="text"
                icon="el-icon-delete"
                size="mini"
                @click="del(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <EnterpriseInformationForm
        ref="enterpriseInformationForm"
        @refreshDataList="refreshList"
      ></EnterpriseInformationForm>
    </div>
  </div>
</template>
<script>
import tableStyles from "../../../../../utils/mixins.js";
import EnterpriseInformationForm from "./EnterpriseInformationForm";
import CityPicker from "@/components/cityPicker";
export default {
  mixins: [tableStyles],
  data() {
    return {
      searchForm: {
        companyName: "",
        area: "",
        gradeRatings: "",
        whetherPay: "",
        // startTime: '',
        // endTime: ''
        socialCredit: "",
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
    };
  },
  components: {
    CityPicker,
    EnterpriseInformationForm,
  },
  activated() {
    this.refreshList();
  },
  methods: {
    //跳转
    enterpriseInfoRouter(url) {
      this.$router.push(url);
    },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/enterpriseinformation/enterpriseInformation/list",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy,
          // beginStartTime: this.searchForm.startTime[0],
          // endStartTime: this.searchForm.startTime[1],
          // beginEndTime: this.searchForm.endTime[0],
          // endEndTime: this.searchForm.endTime[1],
          // ...this.lodash.omit(this.searchForm, 'startTime', 'endTime')
          ...this.lodash.omit(this.searchForm),
        },
      }).then(({ data }) => {
        // console.log(data)
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.enterpriseInformationForm.init("add", "");
    },
    // 修改
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.enterpriseInformationForm.init("edit", id);
    },
    // 查看
    view(id) {
      this.$refs.enterpriseInformationForm.init("view", id);
    },
    // 删除
    del(id) {
      console.log(id);
      console.log(this.dataListSelections);
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            console.log(item.id);
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/enterpriseinformation/enterpriseInformation/delete",
          method: "delete",
          params: { ids: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.msg,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 下载模板
    downloadTpl() {
      this.$utils.download(
        "/dlyrl/hr/enterpriseinformation/enterpriseInformation/import/template"
      );
    },
    exportExcel() {
      let params = {
        // beginStartTime: this.searchForm.startTime[0],
        // endStartTime: this.searchForm.startTime[1],
        // beginEndTime: this.searchForm.endTime[0],
        // endEndTime: this.searchForm.endTime[1],
        // ...this.lodash.omit(this.searchForm, 'startTime', 'endTime')
        ...this.lodash.omit(this.searchForm),
      };
      this.$utils.download(
        "/dlyrl/hr/enterpriseinformation/enterpriseInformation/export",
        params
      );
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>
<style scoped>
ul {
  margin: 0;
}
</style>